{% extends "layout.html" %}

{% block content %}
<div class="nested-container">

    {% if session["current_redaction_job"] %}
    <!-- Button to go back to metrics page with job_id -->

    <a class="btn btn-outline-info mb-4" href="{{ url_for('report_redaction.report_redaction_metrics', job_id=session['current_redaction_job']) }}">
        <i class="bi bi-arrow-left-circle"></i> <b>Back to Metrics Summary Page</b>
    </a>
    {% endif %}
    <h3 class="display-4 text-center mb-3">Report Redaction Viewer</h3>
    <div class="d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Report {{ report_number }}/{{ total_reports }}: {{ report_id }}</h4>
        {% if metadata %}
        <button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMetadata"
            aria-expanded="false" aria-controls="collapseMetadata">
            Metadata
        </button>
        {% endif %}
    </div>

    {% if metadata %}
    <div class="collapse" id="collapseMetadata">
        <div class="card card-body">
            <pre>{{ metadata }}</pre>
        </div>
    </div>
    {% endif %}


    {% if scores %}
    <div class="card mt-3 mb-3">

        <div class="d-flex justify-content-between align-items-center card-header">
            <h3 class="card-title">Metrics</h3>
            <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseConfMat" aria-expanded="false" aria-controls="collapseConfMat">
                <span style="vertical-align: middle;">Confusion Matrix</span> <span
                    style="vertical-align: middle;">▦</span>
            </button>

        </div>

        <div class="card-body shadow-sm">

            <div class="collapse" id="collapseConfMat">
                <div class="card card-body">
                    <img src="{{ url_for('report_redaction.reportredactionconfusionmatrix') }}" class="img"
                        height="300px">
                </div>
            </div>

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"
                        type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">All
                        Annotations</button>
                </li>
                {% for key, value in scores.items() if key != 'personal_info_list' %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="scores-tab-{{ key }}" data-bs-toggle="tab"
                        data-bs-target="#scores-tab-{{ key }}-pane" type="button" role="tab"
                        aria-controls="scores-tab-{{ key }}-pane" aria-selected="false">{{ key }}</button>
                </li>
                {% endfor %}
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                    tabindex="0">
                    <div class="btn-group">
                        {% for key, value in scores['personal_info_list'][0].items() %}
                        {% if key == 'false_negatives' %}
                        {% if value == 0 %}
                        <button type="button" class="btn btn-success">{{ key }}: {{ value }}</button>
                        {% else %}
                        <button type="button" class="btn btn-danger">{{ key }}: {{ value }}</button>
                        {% endif %}
                        {% else %}
                        <button type="button" class="btn btn-secondary" disabled>{{ key }}: {{ value }}</button>
                        {% endif %}
                        {% endfor %}
                    </div>

                </div>
                {% for label, value in scores.items() if label != 'personal_info_list' %}

                <div class="tab-pane fade" id="scores-tab-{{ label }}-pane" role="tabpanel"
                    aria-labelledby="scores-tab-{{ label }}" tabindex="0">
                    <div class="btn-group">
                        {% for key, value in scores[label][0].items() %}
                        <button type="button" class="btn btn-secondary" disabled>{{ key }}: {{ value }}</button>
                        {% endfor %}

                    </div>
                </div>
                {% endfor %}

            </div>
        </div>
    </div>
    {% endif %}



    <div class="navigation-buttons">
        {% if previous_id %}
        <a href="{{ url_for('report_redaction.report_redaction_viewer', report_id=previous_id) }}"
            class="btn btn-secondary float-left">❮ Previous Report</a>
        {% endif %}
        {% if next_id %}
        <a href="{{ url_for('report_redaction.report_redaction_viewer', report_id=next_id) }}"
            class="btn btn-secondary float-right">Next Report ❯</a>
        {% endif %}
        <div class="clearfix"></div>
    </div>
    {% if not session.get('annotation_file', False) or not session.get('annotation_pdf_filepath', None) %}
    <div class="pdf-container">
        <!-- <div class="pdf-viewer">
            <h3>Original Document</h3>
            <iframe src="{{ url_for('report_redaction.reportredactionfileoriginal', id=report_id) }}" height="800px" frameborder="0"></iframe>
        </div> -->
        <div class="pdf-viewer shadow-sm">
            <h3>Redacted Document</h3>
            <iframe src="{{ url_for('report_redaction.reportredactionfileredacted', id=report_id) }}" height="800px"
                frameborder="0" width="100%"></iframe>
        </div>
    </div>
    {% else %}
    <div class="pdf-container">
        <!-- <div class="pdf-viewer-3">
            <h3>Original Document</h3>
            <iframe src="{{ url_for('report_redaction.reportredactionfileoriginal', id=report_id) }}" height="800px" frameborder="0"></iframe>
        </div> -->
        <div class="pdf-viewer-2 shadow-sm">
            <h3>Redacted Document</h3>
            <iframe src="{{ url_for('report_redaction.reportredactionfileredacted', id=report_id) }}" height="800px"
                frameborder="0" width="100%"></iframe>
        </div>
        <div class="pdf-viewer-2 shadow-sm">
            <h3>Annotated Document</h3>
            <iframe src="{{ url_for('report_redaction.reportredactionfileannotation', id=report_id) }}" height="800px"
                frameborder="0" width="100%"></iframe>
        </div>
    </div>
    {% endif %}
    <div class="personal-info-list">
        <h3>Personal Information</h3>
        <div class="btn-group flex-wrap" role="group" aria-label="Personal Information">
            {% for label, list in personal_info_dict.items() %}
            {% if label != 'personal_info_list' %}
            {% if label in colormap.keys() %}
            {% for personal_information in list %}
            {% set r = colormap[label][0] * 255 %}
            {% set g = colormap[label][1] * 255 %}
            {% set b = colormap[label][2] * 255 %}
            {% set luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 %}
            {% set text_color = 'white' if luminance < 0.5 else 'black' %} <button type="button" class="btn"
                style="background-color: rgb({{ r }}, {{ g }}, {{ b }}); color: {{ text_color }};" data-toggle="tooltip"
                data-placement="top" title="{{ label }}">
                <b>{{ personal_information }}</b><br>
                <small>{{ label }}</small>
                </button>
                {% endfor %}
                {% else %}
                {% for personal_information in list %}
                <button type="button" class="btn btn-outline-dark" data-toggle="tooltip" data-placement="top"
                    title="{{ label }}">
                    <b>{{ personal_information }}</b> <br>
                    <small>{{ label }}</small>
                </button>
                {% endfor %}
                {% endif %}
                {% endif %}
                {% endfor %}
        </div>


    </div>
    {% if enable_fuzzy %}
    <div class="personal-info-list">
        <h3>Fuzzy Matches</h3>
        <div class="btn-group flex-wrap" role="group" aria-label="Personal Information">
            {% for label, list in fuzzy_matches_dict.items() %}
            {% if label != 'personal_info_list' %}
            {% if label in colormap.keys() %}
            {% for personal_information in list %}
            {% set r = colormap[label][0] * 255 %}
            {% set g = colormap[label][1] * 255 %}
            {% set b = colormap[label][2] * 255 %}
            {% set luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 %}
            {% set text_color = 'white' if luminance < 0.5 else 'black' %} <button type="button" class="btn"
                style="background-color: rgb({{ r }}, {{ g }}, {{ b }}); color: {{ text_color }};" data-toggle="tooltip"
                data-placement="top" title="{{ label }}">
                <b>{{ personal_information[0] }}</b> <br>
                <small>Score: {{ personal_information[1] }}</small> <br>
                <small>{{ label }}</small>
                </button>
                {% endfor %}
                {% else %}
                {% for personal_information in list %}
                <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="{{ label }}">
                    <b>{{ personal_information[0] }}</b> <br>
                    <small>Score: {{ personal_information[1] }}</small> <br>
                    <small>{{ label }}</small>
                </button>
                {% endfor %}
                {% endif %}
                {% endif %}
                {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if colormap %}
    <h3>Color Map</h3>

    <div class="btn-group" role="group" aria-label="Color Map">
        {% for label, color in colormap.items() %}
        {% set r = color[0] * 255 %}
        {% set g = color[1] * 255 %}
        {% set b = color[2] * 255 %}
        {% set luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 %}
        {% set text_color = 'white' if luminance < 0.5 else 'black' %} <button type="button" class="btn"
            style="background-color: rgb({{ r }}, {{ g }}, {{ b }}); color: {{ text_color }};">{{ label }}</button>
            {% endfor %}
    </div>
    {% endif %}

</div>


<style>
    .pdf-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .pdf-viewer {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .pdf-viewer-2 {
        width: 49%;
        /* Adjust width to accommodate spacing */
        padding: 10px;
        margin: 0px;
        /* Add spacing between iframes */
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .pdf-viewer-3 {
        width: 33%;
        /* Adjust width to accommodate spacing */
        padding: 10px;
        margin: 0px;
        /* Add spacing between iframes */
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .pdf-viewer iframe {
        width: 100%;
    }

    .navigation-buttons {
        margin-bottom: 20px;
    }

    .clearfix {
        clear: both;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .report-number {
        display: inline-block;
        margin: 0 10px;
    }

    .personal-info-list {
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .container-custom {
        max-width: 95%;
    }

    .nested-container {
        position: absolute;
        left: 50%;
        /* Position the left edge of the container at the horizontal center */
        transform: translateX(-50%);
        /* Move the container to the left by half of its width */
        width: calc(90vw - 30px);
        padding: 30px 15px;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"></script>

<script>
    var socket = io.connect('http://' + document.domain + ':' + location.port);

    socket.on('reportredaction_done', function (data) {
        var fuzzyMatches = data.fuzzy_matches;

        // Get the button group element by its id
        var buttonGroup = document.getElementById('fuzzy-matches-group');

        // Clear existing buttons
        buttonGroup.innerHTML = '';

        // Add buttons for each fuzzy match
        fuzzyMatches.forEach(function (match) {
            var matchString = match[0];
            var score = match[1];
            var buttonText = matchString + ' (Score: ' + score + ')';

            // Create a button element
            var button = document.createElement('button');
            button.setAttribute('type', 'button');
            button.setAttribute('class', 'btn btn-secondary');
            button.setAttribute('disabled', 'disabled');
            button.innerText = buttonText;

            // Append the button to the button group
            buttonGroup.appendChild(button);
        });
    });

    socket.on('scores', function (data) {
        var accuracy = data.accuracy;
        console.log("Received accuracy score:", accuracy);
        // You can use the accuracy score here in your website
    });
</script>

{% endblock %}